import React, { Component } from "react";
import { Animated, FlexAlignType, StyleSheet } from "react-native";
import View = Animated.View;
import Toggle from "./toggle";

export default class Flexbox extends Component<
  {},
  {
    flexDirection: "row" | "column" | "row-reverse" | "column-reverse" | string;
    justifyContent:
      | "flex-start"
      | "flex-end"
      | "center"
      | "space-between"
      | "space-around"
      | "space-evenly"
      | string;
    alignItems: FlexAlignType | string;
  }
> {
  state = {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  };

  render() {
    const { flexDirection, alignItems, justifyContent } = this.state;
    const layoutStyle = { flexDirection, justifyContent, alignItems };

    const primaryAxis = flexDirection === "row" ? "Horizontal" : "Vertical";
    const secondaryAxis = flexDirection === "row" ? "Vertical" : "Horizontal";

    return (
      <View style={styles.container}>
        <Toggle
          label={"Primary axis (flexDirection)"}
          value={flexDirection}
          options={["row", "column"]}
          onChange={option => this.setState({ flexDirection: option })}
        />
        <Toggle
          label={primaryAxis + " distribution (justifyContent)"}
          value={justifyContent}
          options={[
            "flex-start",
            "center",
            "flex-end",
            "space-around",
            "space-between"
          ]}
          onChange={option => this.setState({ justifyContent: option })}
        />
        <Toggle
          label={secondaryAxis + " alignment (alignItems)"}
          value={alignItems}
          options={["flex-start", "center", "flex-end", "stretch"]}
          onChange={option => this.setState({ alignItems: option })}
        />
        <View style={[styles.layout, layoutStyle]}>
          <View style={styles.box} />
          <View style={styles.box} />
          <View style={styles.box} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  layout: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.05)"
  },
  box: {
    padding: 25,
    backgroundColor: "steelblue",
    margin: 5
  }
});
